<template>
  <div>
    <!-- 生物测量 -->

    <table class="region_data">
      <tbody>
        <tr>
          <th class="title_bg w-[15%]" :rowspan="7">
            <div>
              <div class="text-[1rem]">
                {{ props.title }}
              </div>

              <div class="flex justify-center items-center mt-[1rem]">
                <span class="font-medium text-[0.7rem]">AL/CR: </span>
                <div
                  class="min-w-[2.5rem]"
                  @dblclick="
                    handleDbClickFocus(
                      `${props.regionId}_AxialRatio${props.capName}`
                    )
                  "
                >
                  <el-input
                    v-model="data_form[`AxialRatio${props.capName}`]"
                    placeholder="请输入"
                    :data-field="`${props.regionId}_AxialRatio${props.capName}`"
                    @blur="handleDbClickBlur"
                    v-if="
                      props.modelValue ==
                      `${props.regionId}_AxialRatio${props.capName}`
                    "
                  />
                  <span v-else>
                    <span v-if="data_form[`AxialRatio${props.capName}`]">
                      {{ data_form[`AxialRatio${props.capName}`] }}
                    </span>
                    <span v-else class="dbClickPlaceholder">
                      {{ props.dbClickPlaceholder }}
                    </span>
                  </span>
                </div>
              </div>
            </div>
          </th>
          <th class="w-[2rem]"></th>
          <th class="content">CCT</th>
          <th class="content">AD</th>
          <th class="content">LT</th>
          <th class="content">VT</th>
          <th class="content">AL</th>
          <th class="w-[25%]"></th>
        </tr>
        <tr v-for="item in 5" :key="item">
          <th>#{{ item }}</th>
          <td
            @dblclick="
              handleDbClickFocus(
                `${props.regionId}_${props.lowerName}Cct${item}`
              )
            "
          >
            <el-input
              v-model="data_form[`${props.lowerName}Cct${item}`]"
              :placeholder="`请输入${props.directionName}CCT${item}`"
              :data-field="`${props.regionId}_${props.lowerName}Cct${item}`"
              @blur="handleDbClickBlur"
              v-if="
                props.modelValue ==
                `${props.regionId}_${props.lowerName}Cct${item}`
              "
            />
            <span v-else>
              <span v-if="data_form[`${props.lowerName}Cct${item}`]">
                {{ data_form[`${props.lowerName}Cct${item}`] }}
              </span>
              <span v-else class="dbClickPlaceholder">
                {{ props.dbClickPlaceholder }}
              </span>
            </span>
          </td>
          <td
            @dblclick="
              handleDbClickFocus(
                `${props.regionId}_${props.lowerName}Ad${item}`
              )
            "
          >
            <el-input
              v-model="data_form[`${props.lowerName}Ad${item}`]"
              :placeholder="`请输入${props.directionName}AD${item}`"
              :data-field="`${props.regionId}_${props.lowerName}Ad${item}`"
              @blur="handleDbClickBlur"
              v-if="
                props.modelValue ==
                `${props.regionId}_${props.lowerName}Ad${item}`
              "
            />
            <span v-else>
              <span v-if="data_form[`${props.lowerName}Ad${item}`]">
                {{ data_form[`${props.lowerName}Ad${item}`] }}
              </span>
              <span v-else class="dbClickPlaceholder">
                {{ props.dbClickPlaceholder }}
              </span>
            </span>
          </td>
          <td
            @dblclick="
              handleDbClickFocus(
                `${props.regionId}_${props.lowerName}Lt${item}`
              )
            "
          >
            <el-input
              v-model="data_form[`${props.lowerName}Lt${item}`]"
              :placeholder="`请输入${props.directionName}LT${item}`"
              :data-field="`${props.regionId}_${props.lowerName}Lt${item}`"
              @blur="handleDbClickBlur"
              v-if="
                props.modelValue ==
                `${props.regionId}_${props.lowerName}Lt${item}`
              "
            />
            <span v-else>
              <span v-if="data_form[`${props.lowerName}Lt${item}`]">
                {{ data_form[`${props.lowerName}Lt${item}`] }}
              </span>
              <span v-else class="dbClickPlaceholder">
                {{ props.dbClickPlaceholder }}
              </span>
            </span>
          </td>
          <td
            @dblclick="
              handleDbClickFocus(
                `${props.regionId}_${props.lowerName}Vt${item}`
              )
            "
          >
            <el-input
              v-model="data_form[`${props.lowerName}Vt${item}`]"
              :placeholder="`请输入${props.directionName}VT${item}`"
              :data-field="`${props.regionId}_${props.lowerName}Vt${item}`"
              @blur="handleDbClickBlur"
              v-if="
                props.modelValue ==
                `${props.regionId}_${props.lowerName}Vt${item}`
              "
            />
            <span v-else>
              <span v-if="data_form[`${props.lowerName}Vt${item}`]">
                {{ data_form[`${props.lowerName}Vt${item}`] }}
              </span>
              <span v-else class="dbClickPlaceholder">
                {{ props.dbClickPlaceholder }}
              </span>
            </span>
          </td>
          <td
            @dblclick="
              handleDbClickFocus(`${props.regionId}_Al${props.capName}${item}`)
            "
          >
            <el-input
              v-model="data_form[`Al${props.capName}${item}`]"
              :placeholder="`请输入${props.directionName}AL${item}`"
              :data-field="`${props.regionId}_Al${props.capName}${item}`"
              @blur="handleDbClickBlur"
              v-if="
                props.modelValue ==
                `${props.regionId}_Al${props.capName}${item}`
              "
            />
            <span v-else>
              <span v-if="data_form[`Al${props.capName}${item}`]">
                {{ data_form[`Al${props.capName}${item}`] }}
              </span>
              <span v-else class="dbClickPlaceholder">
                {{ props.dbClickPlaceholder }}
              </span>
            </span>
          </td>
          <th :rowspan="6" v-if="item == 1" class="rt_th">
            <ul class="rt_box">
              <li
                @dblclick="
                  handleDbClickFocus(
                    `${props.regionId}_AxialRatio${props.capName}1`
                  )
                "
              >
                <div class="rt_content">
                  <div class="rt_title">K1</div>

                  <el-input
                    v-model="data_form[`AxialRatio${props.capName}1`]"
                    placeholder="请输入"
                    :data-field="`${props.regionId}_AxialRatio${props.capName}1`"
                    @blur="handleDbClickBlur"
                    size="small"
                    v-if="
                      props.modelValue ==
                      `${props.regionId}_AxialRatio${props.capName}1`
                    "
                  />
                  <el-text truncated class="rt_value" v-else>
                    <span v-if="data_form[`AxialRatio${props.capName}1`]">
                      {{ data_form[`AxialRatio${props.capName}1`] }}
                    </span>
                    <span v-else class="dbClickPlaceholder">
                      {{ props.dbClickPlaceholder }}
                    </span>
                  </el-text>
                </div>
              </li>
              <li
                @dblclick="
                  handleDbClickFocus(
                    `${props.regionId}_AxialRatio${props.capName}2`
                  )
                "
              >
                <div class="rt_content">
                  <div class="rt_title">K2</div>

                  <el-input
                    v-model="data_form[`AxialRatio${props.capName}2`]"
                    placeholder="请输入"
                    :data-field="`${props.regionId}_AxialRatio${props.capName}2`"
                    size="small"
                    @blur="handleDbClickBlur"
                    v-if="
                      props.modelValue ==
                      `${props.regionId}_AxialRatio${props.capName}2`
                    "
                  />
                  <el-text truncated class="rt_value" v-else>
                    <span v-if="data_form[`AxialRatio${props.capName}2`]">
                      {{ data_form[`AxialRatio${props.capName}2`] }}
                    </span>
                    <span v-else class="dbClickPlaceholder">
                      {{ props.dbClickPlaceholder }}
                    </span>
                  </el-text>
                </div>
              </li>
              <li
                @dblclick="
                  handleDbClickFocus(`${props.regionId}_${props.lowerName}Ast`)
                "
              >
                <div class="rt_content">
                  <div class="rt_title">AST</div>

                  <el-input
                    v-model="data_form[`${props.lowerName}Ast`]"
                    placeholder="请输入"
                    :data-field="`${props.regionId}_${props.lowerName}Ast`"
                    size="small"
                    @blur="handleDbClickBlur"
                    v-if="
                      props.modelValue ==
                      `${props.regionId}_${props.lowerName}Ast`
                    "
                  />
                  <el-text truncated class="rt_value" v-else>
                    <span v-if="data_form[`${props.lowerName}Ast`]">
                      {{ data_form[`${props.lowerName}Ast`] }}
                    </span>
                    <span v-else class="dbClickPlaceholder">
                      {{ props.dbClickPlaceholder }}
                    </span>
                  </el-text>
                </div>
              </li>
              <li
                @dblclick="
                  handleDbClickFocus(
                    `${props.regionId}_${props.lowerName}_avg_mm`
                  )
                "
              >
                <div class="rt_content">
                  <div class="rt_title">AVGR</div>

                  <el-input
                    v-model="data_form[`${props.lowerName}_avg_mm`]"
                    placeholder="请输入"
                    :data-field="`${props.regionId}_${props.lowerName}_avg_mm`"
                    size="small"
                    @blur="handleDbClickBlur"
                    v-if="
                      props.modelValue ==
                      `${props.regionId}_${props.lowerName}_avg_mm`
                    "
                  />
                  <el-text truncated class="rt_value" v-else>
                    <span v-if="data_form[`${props.lowerName}_avg_mm`]">
                      {{ data_form[`${props.lowerName}_avg_mm`] }}
                    </span>
                    <span v-else class="dbClickPlaceholder">
                      {{ props.dbClickPlaceholder }}
                    </span>
                  </el-text>
                </div>
              </li>
              <li
                @dblclick="
                  handleDbClickFocus(`${props.regionId}_WTW${props.capName}`)
                "
              >
                <div class="rt_content">
                  <div class="rt_title">WTW</div>

                  <el-input
                    v-model="data_form[`WTW${props.capName}`]"
                    placeholder="请输入"
                    :data-field="`${props.regionId}_WTW${props.capName}`"
                    size="small"
                    @blur="handleDbClickBlur"
                    v-if="
                      props.modelValue ==
                      `${props.regionId}_WTW${props.capName}`
                    "
                  />
                  <el-text truncated class="rt_value" v-else>
                    <span v-if="data_form[`WTW${props.capName}`]">
                      {{ data_form[`WTW${props.capName}`] }}
                    </span>
                    <span v-else class="dbClickPlaceholder">
                      {{ props.dbClickPlaceholder }}
                    </span>
                  </el-text>
                </div>
              </li>
              <li
                @dblclick="
                  handleDbClickFocus(
                    `${props.regionId}_PupilDiameter${props.capName}`
                  )
                "
              >
                <div class="rt_content">
                  <div class="rt_title">PS</div>

                  <el-input
                    v-model="data_form[`PupilDiameter${props.capName}`]"
                    placeholder="请输入"
                    :data-field="`${props.regionId}_PupilDiameter${props.capName}`"
                    size="small"
                    @blur="handleDbClickBlur"
                    v-if="
                      props.modelValue ==
                      `${props.regionId}_PupilDiameter${props.capName}`
                    "
                  />
                  <el-text truncated class="rt_value" v-else>
                    <span v-if="data_form[`PupilDiameter${props.capName}`]">
                      {{ data_form[`PupilDiameter${props.capName}`] }}
                    </span>
                    <span v-else class="dbClickPlaceholder">
                      {{ props.dbClickPlaceholder }}
                    </span>
                  </el-text>
                </div>
              </li>
            </ul>
          </th>
        </tr>
        <tr>
          <th>AVG</th>
          <td
            @dblclick="
              handleDbClickFocus(`${props.regionId}_${props.lowerName}Cct`)
            "
          >
            <el-input
              v-model="data_form[`${props.lowerName}Cct`]"
              :placeholder="`请输入${props.directionName}CCT`"
              :data-field="`${props.regionId}_${props.lowerName}Cct`"
              @blur="handleDbClickBlur"
              v-if="
                props.modelValue == `${props.regionId}_${props.lowerName}Cct`
              "
            />
            <span v-else>
              <span v-if="data_form[`${props.lowerName}Cct`]">
                {{ data_form[`${props.lowerName}Cct`] }}
              </span>
              <span v-else class="dbClickPlaceholder">
                {{ props.dbClickPlaceholder }}
              </span>
            </span>
          </td>
          <td
            @dblclick="
              handleDbClickFocus(`${props.regionId}_${props.lowerName}Ad`)
            "
          >
            <el-input
              v-model="data_form[`${props.lowerName}Ad`]"
              :placeholder="`请输入${props.directionName}AD`"
              :data-field="`${props.regionId}_${props.lowerName}Ad`"
              @blur="handleDbClickBlur"
              v-if="
                props.modelValue == `${props.regionId}_${props.lowerName}Ad`
              "
            />
            <span v-else>
              <span v-if="data_form[`${props.lowerName}Ad`]">
                {{ data_form[`${props.lowerName}Ad`] }}
              </span>
              <span v-else class="dbClickPlaceholder">
                {{ props.dbClickPlaceholder }}
              </span>
            </span>
          </td>
          <td
            @dblclick="
              handleDbClickFocus(`${props.regionId}_${props.lowerName}Lt`)
            "
          >
            <el-input
              v-model="data_form[`${props.lowerName}Lt`]"
              :placeholder="`请输入${props.directionName}LT`"
              :data-field="`${props.regionId}_${props.lowerName}Lt`"
              @blur="handleDbClickBlur"
              v-if="
                props.modelValue == `${props.regionId}_${props.lowerName}Lt`
              "
            />
            <span v-else>
              <span v-if="data_form[`${props.lowerName}Lt`]">
                {{ data_form[`${props.lowerName}Lt`] }}
              </span>
              <span v-else class="dbClickPlaceholder">
                {{ props.dbClickPlaceholder }}
              </span>
            </span>
          </td>
          <td
            @dblclick="
              handleDbClickFocus(`${props.regionId}_${props.lowerName}Vt`)
            "
          >
            <el-input
              v-model="data_form[`${props.lowerName}Vt`]"
              :placeholder="`请输入${props.directionName}VT`"
              :data-field="`${props.regionId}_${props.lowerName}Vt`"
              @blur="handleDbClickBlur"
              v-if="
                props.modelValue == `${props.regionId}_${props.lowerName}Vt`
              "
            />
            <span v-else>
              <span v-if="data_form[`${props.lowerName}Vt`]">
                {{ data_form[`${props.lowerName}Vt`] }}
              </span>
              <span v-else class="dbClickPlaceholder">
                {{ props.dbClickPlaceholder }}
              </span>
            </span>
          </td>
          <td
            @dblclick="
              handleDbClickFocus(`${props.regionId}_Al${props.capName}`)
            "
          >
            <el-input
              v-model="data_form[`Al${props.capName}`]"
              :placeholder="`请输入${props.directionName}AL`"
              :data-field="`${props.regionId}_Al${props.capName}`"
              @blur="handleDbClickBlur"
              v-if="props.modelValue == `${props.regionId}_Al${props.capName}`"
            />
            <span v-else>
              <span v-if="data_form[`Al${props.capName}`]">
                {{ data_form[`Al${props.capName}`] }}
              </span>
              <span v-else class="dbClickPlaceholder">
                {{ props.dbClickPlaceholder }}
              </span>
            </span>
          </td>
        </tr>
        <!-- <tr>
          <th>SD</th>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr> -->
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { watchStorage, setStorageWithEvent } from "@/utils/GlobalMonitoring.js";

onMounted(() => {});

const emit = defineEmits(["handleDbClickFocus", "handleDbClickBlur"]);
const props = defineProps({
  title: {
    type: String,
    default: "OD / 右眼",
  },
  regionId: {
    type: Number,
    default: 0,
  },
  modelValue: {
    type: String,
    default: "",
  },
  dbClickPlaceholder: {
    type: String,
    default: "",
  },
  lowerName: {
    type: String,
    default: "right",
  },
  capName: {
    type: String,
    default: "Right",
  },
  directionName: {
    type: String,
    default: "右眼",
  },
});

const data_form = ref({}); // 数据

// 双击聚焦
const handleDbClickFocus = (ElementName) => {
  emit("handleDbClickFocus", ElementName);
  nextTick(() => {
    // 添加nextTick确保DOM更新后执行
    document.querySelector(`input[data-field="${ElementName}"]`)?.focus();
  });
};

// 失去焦点
const handleDbClickBlur = () => {
  emit("handleDbClickBlur", data_form.value);
};

let cleanup;
onMounted(() => {
  cleanup = watchStorage("refresh_region_data", (e) => {
    data_form.value = e.data.od_os_data;
    
  });

  // 组件卸载时清理监听
  return () => cleanup();
});

onBeforeUnmount(() => {
  cleanup();
});
</script>

<style scoped lang="scss">
.region_data {
  @apply text-[0.65rem];
  tr {
    height: 1.8rem !important;
  }
}
.content {
  @apply w-[12%];
}
.rt_th {
  background-color: transparent;
  padding: 0;
}
.rt_box {
  font-weight: 400;
  @apply w-full h-[10rem] flex flex-col justify-around items-center text-normal;
  li {
    @apply w-full h-full flex items-center;
    &:hover {
      @apply bg-[#f5f5f5] cursor-pointer;
    }
    .rt_content {
      @apply w-full flex  items-center;

      .rt_title {
        @apply w-[2.3rem];
      }

      .rt_value {
        @apply min-w-[2rem] h-full;
      }
    }
  }
}
</style>